import React from 'react';

/**
 * 平台功能亮点组件
 * 展示平台的核心功能和优势
 */
const PlatformFeatures = () => {
  return (
    <section className="py-24 bg-white">
      <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">


        {/* 聚合式变现 - 宽屏显示 */}
        <div className="mb-24">
          <div className="text-center mb-14">
            <h3 className="text-2xl font-bold text-gray-900 mb-6">聚合式变现</h3>
            <p className="text-lg text-gray-600 max-w-5xl mx-auto">
              提供海量变现任务，丰富的推广方式，精准匹配变现需求
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">任务类型丰富</h4>
              <p className="text-gray-600">
                包含互动工具、AI玩法、小说、影视、短剧、漫画、电商、本地生活、APP推广等海量变现任务，精准匹配用户需求。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">推广方式多样</h4>
              <p className="text-gray-600">
                支持挂载推广、别名/搜索码推广、分享推广、橱窗推广、直播推广等多种推广方式。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">推广渠道全面</h4>
              <p className="text-gray-600">
                支持快手、抖音、视频号、小红书、私域多种推广渠道。
              </p>
            </div>
          </div>
        </div>

        {/* 内容社区 - 宽屏显示 */}
        <div className="mb-24">
          <div className="text-center mb-14">
            <h3 className="text-2xl font-bold text-gray-900 mb-6">内容社区</h3>
            <p className="text-lg text-gray-600 max-w-5xl mx-auto">
              feed流内容，千人千面个性化推荐，提升变现效率
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">个性化推荐</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="个性化推荐" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                根据用户行为分析和大数据分析，推荐用户感兴趣的内容。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">支持互动</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="支持互动" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                用户可进行点赞、评论、分享等操作，增强用户互动，营造紧密社区氛围。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">支持组件能力</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="支持组件能力" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                内容支持添加商品、任务组件，可实现任务推广、商品购买，增加变现路径，提升变现效率。
              </p>
            </div>
          </div>
        </div>

        {/* 独家融推策略 - 宽屏显示 */}
        <div className="mb-24">
          <div className="text-center mb-14">
            <h3 className="text-2xl font-bold text-gray-900 mb-6">独家融推策略</h3>
            <p className="text-lg text-gray-600 max-w-5xl mx-auto">
              助力积累流量资产，创造价值最大化
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">融合推广中心</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="融合推广中心" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                达人通过推广融合关键词，将公域流量沉淀至私域，结合多元变现模式，轻松将流量转化为商业价值，实现流量和收益双向增长。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">精准搜索推荐</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="精准搜索推荐" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                根据用户的兴趣和行为数据，为用户提供个性化的搜索结果和推荐内容，提升复购率。
              </p>
            </div>
          </div>
        </div>

        {/* AI工具赋能 - 宽屏显示 */}
        <div className="mb-24">
          <div className="text-center mb-14">
            <h3 className="text-2xl font-bold text-gray-900 mb-6">AI工具赋能</h3>
            <p className="text-lg text-gray-600 max-w-5xl mx-auto">
              针对用户变现场景，提供AI工具，提升变现效率
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">AI导师</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="AI导师" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                AI搜索最新热门资讯，帮你解决变现问题。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">智能配音</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="智能配音" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                只需输入文案，即可生成各类音色配音，提升创作效率。
              </p>
            </div>
          </div>
        </div>

        {/* 专业数据可视化 - 宽屏显示 */}
        <div>
          <div className="text-center mb-14">
            <h3 className="text-2xl font-bold text-gray-900 mb-6">专业数据可视化</h3>
            <p className="text-lg text-gray-600 max-w-5xl mx-auto">
              提供全方位的专业数据分析支持，帮助用户更好地了解的收益情况和趋势
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">团队数据可视化</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="团队数据可视化" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                支持查看团队详细数据，包括直推、推荐、潜在成员等多维度展示，让管理者能够一目了然地掌握团队整体情况。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">多维度排序与筛选</h4>
              <div className="mb-4 relative" style={{ paddingBottom: '56.25%' }}>
                <img src="/images/doutuimao.png" alt="多维度排序与筛选" className="absolute top-0 left-0 w-full h-full object-cover rounded-lg" />
              </div>
              <p className="text-gray-600">
                团队数据支持按照注册时间、收益额、贡献额等维度对团队成员进行排序和筛选，为管理者提供了强大的决策支持。
              </p>
            </div>
             <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">多维度排序与筛选</h4>
              <p className="text-gray-600">
                团队数据支持按照注册时间、收益额、贡献额等维度对团队成员进行排序和筛选，为管理者提供了强大的决策支持。
              </p>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-none">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">收益数据可视化</h4>
              <p className="text-gray-600">
                支持对个人和团队收益数据进行可视化展示，帮助用户随时掌握收益情况。收益数据支持按照时间、推广方式、推广渠道、结算类型等多维度筛选，便于分析收益来源，优化推广策略。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PlatformFeatures;